<!--
* @author wn
* @date 2022/08/26 15:39:11
* @description: 提交订单后  支付 页面
!-->
<template>
	<div v-if="orderDetail" class="pay-page container">
		<!-- 面包屑 -->
		<xtx-bread>
			<xtx-bread-item to="/">首页</xtx-bread-item>
			<xtx-bread-item to="/cart">购物车</xtx-bread-item>
			<xtx-bread-item>支付订单</xtx-bread-item>
		</xtx-bread>
		<!-- 支付提醒 -->
		<div class="pay-remind">
			<span class="icon iconfont icon-queren2"></span>
			<div>
				<p>订单提交成功!请尽快完成支付</p>
				<p v-if="orderDetail.countdown > -1">
					支付还剩{{ timeText }},超时后将取消订单
				</p>
				<p v-else>订单已经超时</p>
			</div>
			<span><i>应付总额: </i>¥{{ orderDetail.payMoney }}</span>
		</div>
		<!-- 支付方式 -->
		<div class="pay-way">
			<p class="title">请选择以下支付方式付款</p>
			<div class="wrapper">
				<p>支付平台</p>
				<xtx-button size="small" class="wx"></xtx-button>
				<xtx-button
					size="small"
					class="ali-pay active"
					@click="aliPay"
				></xtx-button>
				<p>支付方式</p>
				<xtx-button size="small">招商银行</xtx-button>
				<xtx-button size="small">建设银行</xtx-button>
				<xtx-button size="small">工商银行</xtx-button>
				<xtx-button size="small">农业银行</xtx-button>
				<xtx-button size="small">烟台银行</xtx-button>
			</div>
		</div>
	</div>
	<!-- 支付订单时 占位 -->
	<xtx-dialog :title="title" v-model="dialogVisible">
		<div class="pay-wait">
			<img src="@/assets/images/load.gif" alt="" />
			<div v-if="orderDetail">
				<p>如果支付成功：</p>
				<router-link :to="`/member/order/${orderDetail.id}`">
					查看订单详情>
				</router-link>
				<p>如果支付失败：</p>
				<router-link to="/">查看相关疑问></router-link>
			</div>
		</div>
	</xtx-dialog>
</template>
<script>
import { findOrderDetail } from '@/network/order'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import { useCountDownBtn } from '@/hooks'
import { baseURL } from '@/utils/request'
// import { useStore } from 'vuex'

export default {
	name: 'PayPage',
	setup() {
		const route = useRoute()
		// 获取订单详细
		const orderDetail = ref(null)
		findOrderDetail(route.query.orderId).then(({ result }) => {
			orderDetail.value = result
			// 微任务  后执行 result.countdown = -1
			if (result.countdown <= -1) return
			time.value = result.countdown
			resumeForFirst()
		})
		// 倒计时 显示 format = true
		const { time, timeText, resumeForFirst } = useCountDownBtn(true)

		/**
		 * 支付宝 支付
		 * 1 打开支付 占位 对话框
		 * 2 新开页签   a-->target="_blank"
		 * 3 携带 --baseURL + url  --id  --/pay/callback
		 */
		const dialogVisible = ref(false)
		// 同 QQ 登陆  www.corho.com:8080-->127.0.0.1:8080
		const redirect = encodeURIComponent(
			'http://www.corho.com:8080/#/pay/callback'
		)
		const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.orderId}&redirect=${redirect}`
		const aliPay = () => {
			dialogVisible.value = true
			window.open(payUrl)
		}

		// 支付时  打开 正在支付 对话框   支付完成  关闭  或者 更改内容 函数
		const title = ref('正在支付...')
		// const store = useStore()
		// const paySuccessFn = store.state.user.paySuccessFn
		// console.log(paySuccessFn)
		/* const paySuccessFn = orderState => {
			orderState === 1
				? (title.value = '订单支付失败(待付款)')
				: (title.value = '订单支付成功(待发货)')
			console.log('ddddddddddddddddd', orderState)
		} */
		// store.commit('user/setPaySuccessFn', true)
		return { orderDetail, dialogVisible, timeText, aliPay, title }
	},
}
</script>
<style scoped lang="less">
.pay-page {
	margin-bottom: 20px;
	.pay-remind {
		display: flex;
		align-items: center;
		height: 240px;
		padding: 0 80px;
		background-color: #fff;
		margin-bottom: 20px;
		& > :nth-child(1) {
			font-size: 80px;
			color: #1dc779;
		}
		& > :nth-child(2) {
			flex: 1;
			padding-left: 10px;
			p {
				&:first-child {
					font-size: 20px;
					margin-bottom: 5px;
				}
				&:last-child {
					font-size: 16px;
					color: #999;
				}
			}
		}

		& > :nth-child(3) {
			color: @priceColor;
			font-size: 20px;
			i {
				font-size: 16px;
				color: #999;
			}
		}
	}
	.pay-way {
		background-color: #fff;
		padding-bottom: 70px;
		p {
			line-height: 70px;
			font-size: 16px;
			padding-left: 30px;
			&.title {
				border-bottom: 1px solid #f5f5f5;
			}
		}

		.wrapper {
			.xtx-button {
				margin-left: 30px;
				width: 150px;
				height: 50px;
				&.active,
				&:hover {
					border-color: @xtxColor;
				}
				// 微信支付 支付宝支付  图标
				&.wx {
					background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg)
						no-repeat center / contain;
				}
				&.ali-pay {
					background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png)
						no-repeat center / contain;
				}
			}
		}
	}
}
.pay-wait {
	display: flex;
	justify-content: space-around;
	p {
		margin: 30px 0 2px;
		font-size: 14px;
	}
	a {
		color: @xtxColor;
	}
}
.xtx-dialog {
	:deep(.footer) {
		display: none;
	}
}
</style>
